<template>
  <div class="dv-decoration-7">
    <svg width="41px" height="20px">
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="26, 0 ,34, 10, 26, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="18, 0, 26, 10, 18, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[2]"
        points="10, 0, 19, 10, 10, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[3]"
        points="2, 0, 11, 10, 2, 20"
      />
    </svg>
    <div class="item-subtitle">
      {{text}}
    </div>
    <svg width="41px" height="20px">
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[0]"
        points="11, 0 2, 10 11, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[1]"
        points="19, 0 10, 10 19, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[2]"
        points="27, 0 18, 10 27, 20"
      />
      <polyline
        stroke-width="2"
        fill="transparent"
        :stroke="mergedColor[3]"
        points="35, 0 26, 10 35, 20"
      />
    </svg>
  </div>
</template>

<script>
import { deepMerge } from "@jiaminghi/charts/lib/util/index";

import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";

export default {
  // props:["text"],
  name: "DvDecoration7",
  props: {
    color: {
      type: Array,
      default: () => [],
    },
    text: {
      type:String,
      default:"AAA"
    }
  },
  data() {
    return {
      defaultColor: [
        "rgba(29, 193, 245,1)",
        "rgba(29, 193, 245,0.8)",
        "rgba(29, 193, 245,0.7)",
        "rgba(29, 193, 245,0.5)",
        "rgba(29, 193, 245,0.4)",
      ],

      mergedColor: [],
    };
  },
  watch: {
    color() {
      const { mergeColor } = this;

      mergeColor();
    },
  },
  methods: {
    mergeColor() {
      const { color, defaultColor } = this;

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || []);
    },
  },
  mounted() {
    const { mergeColor } = this;

    mergeColor();
  },
};
</script>

<style >
.dv-decoration-7 {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: center;
  align-items: center;
}
.item-subtitle {
  letter-spacing: 4px;
  background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
  color: transparent;
  -webkit-background-clip: text;
  font-size: 20px;
  font-weight: bold;
}
</style>
